<template>
  <div class="custom-pop-wrapper" ref="customPopup">
    <div class="mask" ref="mask"></div>
    <div
      class="pop-wrapper-content"
      :style="`width:${width || 1487}px;`"
      ref="popWrapper"
    >
      <svg
        id="borde_deck"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1490.98 691.38"
        :style="`width:${width || 1488}px;height:690px;`"
        preserveAspectRatio="none"
        ref="border"
      >
        <path
          id="border_deck"
          data-name="border deck"
          d="M1480.28,690.05H1454.9l4-3.67h19l9.35-9.34v-6l3.68-5v13Zm-.5-8.68-3.5,3.34h-15.69l2.83-3.34Zm-4.16-675.7,3.5,3.33h-16.37l-2.84-3.33Zm11,7.67L1477.28,4h-19l-4-3.67h25.39l10.68,11v13l-3.66-5v-6Zm-46.77-8.67H1109.7l4.51-4.51h17V.4L1439.87.17V.4h9.77l4.51,4.25h-14.28Zm-687.13,5V7.33h341.68L1096.76,4h-344V0l358,.33-8.69,9.34Zm-7,677.7h4v4h-4Zm0-6h4v4h-4ZM744.72,6h4v4h-4Zm0-6h4V4h-4ZM392.35,680.71H741.72V683H400l-2.34,3.34h344v4l-358-.33ZM383,.33l358-.33V4H397l2.34,3.34H741.05V9.67H391.68ZM359.72,4.67H36.16L40.66.41H51.1L359.72.17h19.86l4.51,4.51ZM13,4,3.67,13.34v6L0,24.35v-13L10.69.33H36.07L32.06,4ZM11.19,9,14.7,5.67H30.39L27.56,9Zm4.17,675.71-3.5-3.34H28.22l2.84,3.34ZM4.34,677l9.35,9.34h19l4,3.67H11.36L.67,679V666l3.67,5v6Zm355.38,8.67h25l-4.5,4.51-20.53,0L51.1,690H41.33l-4.51-4.25h322.9Zm751.74,4.34-358.06.33v-4h344l-2.34-3.34H753.4v-2.33h349.37Zm19.8-4.34h323.56l-4.51,4.25-10.44,0v.22L1131.26,690v.23h-16.38l-4.51-4.51Z"
          fill="#58e1f0"
          fill-rule="evenodd"
        />
      </svg>
      <div class="player-wrapper" ref="content">
        <video
          ref="player"
          class="player"
          id="video-player"
          :src="content"
          autoplay
          controls
          loop
          :muted="muted"
          v-if="isVideo"
        ></video>
        <component
          :is="content"
          v-if="!!isComp"
          ref="popupComponent"
          :style="scaleFun"
        ></component>
        <div
          class="content"
          v-if="!!isImage"
          :style="`background:url(${content}) no-repeat center`"
        ></div>
      </div>
      <div class="describe" :key="num" v-if="desShow">
        <txt
          class="title hy-lingxinti"
          :value="title"
          :params="{
            animateDuration: 0.5,
            animateType: 'waveSmall'
          }"
          ref="title"
          v-if="param.title"
        ></txt>
        <div class="line-wrapper" v-if="param.title">
          <span class="bottom-line" ref="bottom-line"></span>
          <span class="left-line" ref="left-line"></span>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<txt
          v-if="param.describe"
          ref="describe"
          class="txt"
          :value="describe"
          :params="{
            animateDuration: 0.5,
            animateType: 'waveSmall',
            txtStyle: {
              lineHeight: '36px',
              fontSize: '16px',
              color: 'rgba(240,240,240,0.6)'
            }
          }"
        />
      </div>
      <ul class="btn-list" ref="close">
        <li :class="{ 'btn-active': activeIndex == 0 }" @click="clickClose">
          <span class="delete"></span>关闭
        </li>
        <li
          :class="{ 'btn-active': activeIndex == index + 1 }"
          v-for="(item, index) in param.btnList"
          :key="index"
          @click="clkCall(item.btnMethod, item.btnParam, index + 1)"
        >
          {{ item.btnName }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import txt from '../default/txt.vue'
import { Howl } from 'howler'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'poppup',
  components: { txt },
  computed: {
    ...mapState('focus', ['carousel']),
    width() {
      if (!this.desShow) {
        return 1187
      }
    },
    desShow() {
      return this.param.title || this.param.describe
    },
    scaleFun() {
      let content = this.param.content
      let h = app.anovPart[content]['anovPart']['style']['height']
      let w = app.anovPart[content]['anovPart']['style']['width']

      let parent = this.$refs.content
      let ph = window.getComputedStyle(parent).height
      let pw = window.getComputedStyle(parent).width

      let scale =
        Math.floor(
          Math.min(parseInt(ph) / parseInt(h), parseInt(pw) / parseInt(w)) * 100
        ) / 100

      return `transform:scale(${scale});width:${w};height:${h};`
    }
  },
  props: ['param'],
  data() {
    return {
      describe: '',
      title: '',
      num: 0,
      player: null,
      audioUrl: '',
      sound: null,
      videoShow: false,
      isImage: false,
      isVideo: false,
      isComp: false,
      muted: false,
      timer: null,
      activeIndex: 0
    }
  },
  mounted() {},
  methods: {
    ...mapMutations('focus', ['setCarousel']),
    show() {
      //监听路由切换，取消聚焦操作
      app.$on(app.EventType.pageLeave, this.pageLeave)
      if (this.videoShow) return
      let opt = {}
      Object.assign(opt, this.param)
      this.videoShow = true
      this.num++
      this.$refs['customPopup'].style.display = 'block'
      this.describe = opt.describe
      this.title = opt.title
      this.audioUrl = opt.audioUrl
      this.content = opt.content
      this.isImage = /\.(png|jpg|gif|jpeg|webp)$/.test(this.content)
      this.isVideo = /\.mp4$/.test(this.content)
      // 判断是否需要旁白解说，不需要时自动播放视频原声
      this.videoSoundtrack = opt.videoSoundtrack
      if (this.isImage) {
        //图片
        this.isVideo = false
        this.isComp = false
      } else if (this.isVideo) {
        this.isImage = false
        this.isComp = false
        //视频
      } else {
        this.isComp = true
        this.isImage = false
        this.isVideo = false
      }
      if (!this.videoSoundtrack && this.audioUrl) {
        this.muted = true
        this.sound = new Howl({
          src: this.audioUrl,
          loop: true,
          html5: true,
          volume: 0.2
        })
        this.player = this.sound.play()
        if (app.voiceFeedbackServer.state == false) {
          this.sound.fade(this.sound.volume(), 1, 2000)
        }
      } else {
        this.muted = false
      }
      // 是否自动轮播
      if (this.carousel) {
        this.bindEvent()
      }
      // ----------------------------
      if (this.tl) this.tl = null
      this.tl = new TimelineMax({})
      let mask = TweenMax.to(this.$refs['mask'], 0.5, { opacity: 1 })
      let popWrapper = TweenMax.to(this.$refs['popWrapper'], 0.3, {
        opacity: 1,
        height: 689
      })
      let border = TweenMax.to(this.$refs['border'], 0.2, { opacity: 1 })
      let content = TweenMax.to(this.$refs['content'], 0.5, { opacity: 1 })
      let close = TweenMax.to(this.$refs['close'], 0.5, {
        opacity: 1,
        x: '-=100',
        ease: Expo.easeInOut
      })
      this.$nextTick(() => {
        this.isVideo && this.$refs['player'].play()
        this.tl
          .addLabel('start', 0)
          .add(mask, 'start+=0.1')
          .add(popWrapper, 'start+=0.2')
          .add(border, 'start+=0.4')
          .add(content, 'start+=0.6')
          .add(close, 'start+=0.5')
          .add(() => {
            if (this.isComp && !this.tl.reversed()) {
              this.$refs.popupComponent.init()
            }
          }, 'start+=0.6')
          .add(() => {
            if (this.tl?.reversed()) return
            if (this.videoSoundtrack) return
            if (!this.desShow) return
            app.voiceFeedbackServer.speak(this.title + '    ' + this.describe)
            if (app.voiceFeedbackServer.state == true) {
              app.voiceFeedbackServer.addEventListener('end', this.soundEvent)
              this.isBindEvent = true
            }
          }, 'start+=0.3')
        if (this.param.title) {
          let bottomLine = TweenMax.to(this.$refs['bottom-line'], 0.5, {
            width: 280,
            ease: Expo.easeInOut
          })
          let leftLine = TweenMax.to(this.$refs['left-line'], 0.3, {
            width: 80,
            ease: Expo.easeInOut
          })
          this.tl
            .add(this.$refs.title.init(), 'start+=0.8')
            .add(leftLine, 'start+=0.9')
            .add(bottomLine, 'start+=0.9')
        }
        if (this.param.describe) {
          let describe = this.$refs.describe.init()
          describe.timeScale(2)
          describe.eventCallback('onComplete', () => {
            describe.timeScale(5)
          })
          this.tl.add(describe, 'start+=1')
        }
      })
    },
    hide() {
      if (this.timer) clearTimeout(this.timer)
      this.muted = true
      this.videoShow = false
      if (app.voiceFeedbackServer.state == true && this.isBindEvent == true) {
        app.voiceFeedbackServer.synthesis.cancel()
        app.voiceFeedbackServer.removeEventListener('end', this.soundEvent)
      }
      this.sound?.fade(this.sound.volume(), 0, 2000)
      if (!this.tl) return
      this.tl.eventCallback('onReverseComplete', () => {
        this.sound?.unload()
        this.sound = null
        if (this.isVideo) {
          this.$refs['player'].currentTime = 0
        }
        this.tl.clear()
        this.tl.eventCallback('onReverseComplete', null)
        this.tl = null
        this.$refs['customPopup'].style.display = 'none'
        this.isComp = false
        this.isImage = false
        this.isVideo = false
        app.focusServer.hideComplete()
        app.$off(app.EventType.pageLeave, this.pageLeave)
        // 自动轮播时 通知系统播放下一个
        if (this.carousel) {
          app.focusServer.focuseNext()
        }
      })
      this.tl?.timeScale(3).reverse()
    },
    pageLeave() {
      app.focusServer.inactivated()
      app.focusServer.carousel = false
    },
    soundEvent() {
      this.sound?.fade(this.sound.volume(), 1, 2000)
    },
    clickClose() {
      this.activeIndex = 0
      this.carousel && this.setCarousel(false)
      app.focusServer.inactivated()
    },
    // 自动轮播时当前模块结束
    endEvent() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      if (this.video) {
        this.video.loop = true
        this.video.removeEventListener('ended', this.nextEvent)
      }
      // 通知系统当前轮播组件结束
      app.focusServer.inactivated()
    },
    // 自动轮播事件
    bindEvent() {
      this.$nextTick(() => {
        // 视频时 默认视频结束 当前模块展示结束
        if (this.isVideo) {
          this.video = document.getElementById('video-player')
          this.video.loop = false
          this.video.addEventListener('ended', this.endEvent)
        }
        // 图片时 设定当前图片展示事件
        if (this.isImage) {
          this.timer = setTimeout(() => {
            this.endEvent()
          }, this.param.showTime || 15000)
        }
        // 组件时 设定当前组件展时间
        if (this.isComp) {
          this.timer = setTimeout(() => {
            this.endEvent()
          }, this.param.showTime || 15000)
        }
      })
    },
    clkCall(btnMethod, btnParam, index) {
      this.activeIndex = index
      this[btnMethod](btnParam)
    },
    openSystem(param) {
      window.open(param)
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-pop-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  pointer-events: all;
  transform: scale(1.28) !important;
  transform-origin: center !important;
}
.mask {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
.pop-wrapper-content {
  position: absolute;
  width: 1487px;
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url('../../../../../../imgs/sys-img/focus/popup-bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  .player-wrapper {
    width: 1144px;
    height: 645px;
    margin-left: 20px;
    background-size: contain;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    video,
    .content {
      width: 100%;
      height: 100%;
      outline: none;
    }
  }
  .describe {
    width: 330px;
    height: 625px;
    padding: 25px;
  }
  .title {
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
  }
  .line-wrapper {
    position: relative;
    margin-bottom: 30px;
    .left-line {
      position: absolute;
      height: 2px;
      background: rgba(88, 225, 240, 1);
    }
    .bottom-line {
      position: absolute;
      height: 2px;
      background: rgba(80, 225, 240, 0.3);
    }
  }
  .btn-list {
    position: absolute;
    right: -100px;
    top: -63px;
    opacity: 0;
    li {
      float: right;
      width: 123px;
      height: 58px;
      background: url('../../../../../../imgs/sys-img/focus/btn.png') no-repeat
        center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: rgba(240, 240, 240, 0.8);
      pointer-events: all;
      cursor: pointer;
    }
    li:hover {
      background: url('../../../../../../imgs/sys-img/focus/btn-active.png')
        no-repeat center;
      color: rgba(88, 225, 240, 1);
    }
    .btn-active {
      background: url('../../../../../../imgs/sys-img/focus/btn-active.png')
        no-repeat center;
      color: rgba(88, 225, 240, 1);
    }
    .delete {
      width: 30px;
      height: 30px;
      background: url('../../../../../../imgs/sys-img/focus/delete.png');
      margin-left: -12px;
      margin-top: 2px;
    }
  }

  svg {
    position: absolute;
    opacity: 0;
  }
}
</style>
